
import React, { Component } from 'react';
import { StyleSheet, ScrollView, View, Text } from 'react-native';

const styles = StyleSheet.create({
    containerScrollView: {
        marginTop: 64,
        backgroundColor: '#F5FCFF'
    },
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        borderColor:'#cccccc',
        borderTopWidth:1
    },
    text: {
        fontSize: 16,
        color: 'blue',
        textAlign: 'center',
        padding: 10,
    },

});

class MainScene extends Component {
    static propTypes = {
        title: React.PropTypes.string,
    };
    static defaultProps = {
        title: 'MyScene的情景场合一',
    };

    constructor(props, context) {
        super(props, context);
        this.navigationBarLeftButton = this.navigationBarLeftButton.bind(this);
        this.navigationBarRightButton = this.navigationBarRightButton.bind(this);
        this.navigationBarTitle = this.navigationBarTitle.bind(this);
        this.navigationBar = this.navigationBar.bind(this);

        const { navigator } = props;
        //navigator._navBar._components.RightButton = this.navigationBarRightButton;
        //navigator._navBar._components.Title = '自定义';
        //navigator._navBar._components.RightButton = this.navigationBarLeftButton;
        navigator.NavigationBar = this.navigationBar();

    };


    navigationBarLeftButton(route, navigator, index, navState) {

        if (index > 0 ) {
            return (
                <TouchableHighlight onPress={() => { navigator.pop(); }} >
                    <Text style={ styles.leftText} >{route.leftTitle||'返回'}</Text>
                </TouchableHighlight>
            );
        }
        return <View />;
    }

    navigationBarRightButton(route, navigator, index, navState) {

        const pushFromRight = Navigator.SceneConfigs.PushFromRight;
        pushFromRight.gestures.pop.edgeHitWidth = _width * 0.5;

        const nextRourer1 = {
            title: 'MainScene',
            component: MainScene,
            SceneConfigs: pushFromRight,
            leftTitle: '返回',
            rightTitle: 'second',
            rightButtonAction: route.rightButtonAction,
        };

        const nextRourer2 = {
            title: '银行卡列表',
            component: FirstScence,
            SceneConfigs: pushFromRight,
            leftTitle: '后退',
            rightTitle: 'three',
            rightButtonAction: route.rightButtonAction,
        };

        const nextRourer3 = {
            title: '互联网金融',
            component: SecondScence,
            SceneConfigs: pushFromRight,
            leftTitle: '消失',
            rightTitle: '',
            rightButtonAction: route.rightButtonAction,
        };

        if (route.rightTitle !== '') {
            if (index == 0) {
                return (
                    <TouchableHighlight onPress={() => {navigator.push(nextRourer1); }} >
                        <Text style={ styles.rightText } >{route.rightTitle}</Text>
                    </TouchableHighlight>
                );
            }
            if (index == 1) {
                return (
                    <TouchableHighlight onPress={() => { navigator.push(nextRourer2); }} >
                        <Text style={ styles.rightText } >{route.rightTitle}</Text>
                    </TouchableHighlight>
                );
            }
            if (index == 2) {
                return (
                    <TouchableHighlight onPress={() => { navigator.push(nextRourer3); }} >
                        <Text style={ styles.rightText } >{route.rightTitle}</Text>
                    </TouchableHighlight>
                );
            }
        }

        return <View />;
    }

    navigationBarTitle(route) {
        return (<Text style={ styles.centerText } >{ route.title }</Text>);
    }

    navigationBar(){
        return (
            <Navigator.NavigationBar
                style={{ padding:20,  backgroundColor: '#786323'}}
                routeMapper={{
                    LeftButton: this.navigationBarLeftButton,
                    RightButton: this.navigationBarRightButton,
                    Title: this.navigationBarTitle,
                }}
            />
        );
    }

    render() {
        return (
            <ScrollView style={styles.containerScrollView} >
                <Text style={styles.text} >银行列表:名称\简称</Text>
            </ScrollView>
        )
    }
}

export default MainScene;
